<script setup>
import ComSide from '@/components/ComSide.vue';
import ComHeader from './components/ComHeader.vue';
</script>

<template>
  
    <el-container>
      <el-aside width="200px">
        <ComSide></ComSide>
      </el-aside>
      <el-container>
        <el-header>
          <ComHeader></ComHeader>
        </el-header>
        <el-main>Main</el-main>
        <el-footer>云端中国城后台管理系统</el-footer>
      </el-container>
    </el-container>
  

</template>

<style scoped>
.el-container{
  width:100%;
  height:100%;
} 
.el-container .el-header{
  background-color: deepskyblue;
  text-align: center;
  color: var(--el-text-color-primary);
}
.el-container .el-footer {
  position: relative;
  text-align:center;
  
}
.el-container  .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.el-container  .el-menu {
  border-right: none;
}
.el-container  .el-main {
  padding: 0;
}
.el-container  .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
